<template>
  <div class="pagination">
    <span>共{{ state._pageCount }}页</span>
    <select v-model="state._pageSize">
      <option v-for="(item, index) in state._pageSizes" :key="index">
        {{ item }}
      </option>
    </select>
    <span>条/页</span>
    <ul class="page-ul lsnone pbm0 dp-ib">
      <li
        class="li-page lsnone pbm0 dp-ib li-left bt-cmb bc1"
        @click="fnPrePage"
      ></li>
      <li
        v-for="(item, index) in state._pageShowList"
        :key="index"
        :class="[
          'li-page',
          'lsnone',
          'pbm0',
          'dp-ib',
          'bt-cm',
          'mgl10p',
          item === state._currentPage ? 'bc2' : 'bc1',
        ]"
        @click="fnPageClick(item, index)"
      >
        {{ item }}
      </li>
      <li
        class="li-page lsnone pbm0 dp-ib li-right bt-cmb bc1 mgl10p"
        @click="fnNextPage"
      ></li>
    </ul>
    <span>前往<input v-model="state._toPage" /></span>
  </div>
</template>

<script>
import { reactive, watch } from "vue";

export default {
  // 父组件传值
  props: {
    msg: Object,
  },
  setup(props, { emit }) {
    // 双向绑定数据
    const state = reactive({
      _currentPage: 1, // 当前页
      _toPage: 1, // 跳转目的页面
      _maxPage: 7, // 可供选择的页面数量
      _pageShowList: [], // 展示的页面列表
      _pageSize: 10, // 页面尺寸
      _total: 100, // 记录总数
      _pageCount: 1, // 页面总数
      _pageSizes: [10, 20, 30, 40, 50], // 可选的页面尺寸列表
    });
    // emit
    const fnShowPageList = () => {
      let arr = [];
      let middlePage = (state._maxPage + 1) / 2;
      if (state._pageCount <= state._maxPage) {
        for (let i = 0; i < state._pageCount; i++) {
          arr[i] = i + 1;
        }
        return arr;
      }
      if (state._pageCount > state._maxPage) {
        if (state._currentPage <= middlePage) {
          let num = state._maxPage - 1;
          for (let i = 0; i < num; i++) {
            arr[i] = i + 1;
          }
          arr[num] = "···";
          arr[num + 1] = state._pageCount;
          return arr;
        }
        if (state._currentPage > state._pageCount - middlePage) {
          let num = state._maxPage + 1;
          arr[0] = 1;
          arr[1] = "···";
          for (
            let i = 2, j = state._pageCount - state._maxPage + 2;
            i < num;
            i++
          ) {
            arr[i] = j;
            j++;
          }
          return arr;
        }
        let num = state._maxPage;
        arr[0] = 1;
        arr[1] = "···";
        for (
          let i = 2, j = state._currentPage + 1 - (state._maxPage - 1) / 2;
          i < num;
          i++
        ) {
          arr[i] = j;
          j++;
        }
        arr[num] = "···";
        arr[num + 1] = state._pageCount;
        return arr;
      }
    };
    const fnPageChange = () => {
      state._pageCount = Math.ceil(state._total / state._pageSize);
      state._pageShowList = fnShowPageList();
      if (state._currentPage > state._pageCount)
        state._currentPage = state._pageCount;
    };
    const fnPageClick = (currentPage, index) => {
      if (currentPage === state._currentPage) return;
      if (
        currentPage === "···" &&
        state._currentPage < state._pageShowList[index - 1]
      ) {
        let nextPage = state._currentPage + (state._maxPage - 2);
        state._currentPage =
          nextPage > state._pageCount ? state._pageCount : nextPage;
        emit("page-change", state._currentPage);
        console.log(`换页-${state._currentPage}`);
        return;
      }
      if (
        currentPage === "···" &&
        state._currentPage > state._pageShowList[index - 1]
      ) {
        let nextPage = state._currentPage - (state._maxPage - 2);
        state._currentPage = nextPage < 1 ? 1 : nextPage;
        emit("page-change", state._currentPage);
        console.log(`换页-${state._currentPage}`);
        return;
      }
      state._currentPage = currentPage;
      emit("page-change", state._currentPage);
      console.log(`换页-${state._currentPage}`);
    };
    const fnPrePage = () => {
      if (state._currentPage > 1) {
        state._currentPage = state._currentPage - 1;
      }
    };
    const fnNextPage = () => {
      if (state._currentPage < state._pageCount) {
        state._currentPage = state._currentPage + 1;
      }
    };
    // 输入监听
    watch(
      () => state._pageSize,
      // 接收参数 newValue, oldValue
      (newValue) => {
        // 输入值回传父组件
        emit("size-change", newValue);
        fnPageChange();
        console.log(`换size-${newValue}`);
      }
    );
    watch(
      () => state._currentPage,
      // 接收参数 newValue, oldValue
      (newValue) => {
        // 输入值回传父组件
        state._toPage = newValue;
        fnPageChange();
      }
    );
    fnPageChange();
    // 传入模板
    return {
      state,
      fnPageClick,
      fnPrePage,
      fnNextPage,
    };
  },
};
</script>

<style scoped>
.lib-list {
  width: 100%;
}

.li-page {
  text-align: center;
}

.page-ul li:hover {
  cursor: pointer;
}

.bt-cm {
  width: 40px;
  line-height: 40px;
  height: 40px;
}

.bt-cmb {
  width: 30px;
  line-height: 30px;
  height: 30px;
  border-radius: 30px;
}

.li-right::before {
  content: "\003E";
}

.li-left::before {
  content: "\003C";
}
</style>
